var MaterialForm = function () {
  var template = /* html */ `
    <div class="material-form" v-loading.fullscreen.lock="loading">
      <el-form label-width="calc(4em + 25px)" size="medium">
        <el-form-item required label="物料名称">
          <el-input class="form-input" v-model="materialForm.materialName" placeholder="请输入物料名称"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-cascader filterable class="form-input" v-model="materialForm.classifyIds" :options="classifyList" separator="-" :clearable="canClearClassify" 
            placeholder="请选择物料分类" :props="typeCascaderProps"></el-cascader>
        </el-form-item>
        <el-form-item label="物料图片">
          <imgs-upload ref="materialImgsUpload" v-model="materialForm.imgUrls" :limit="4" :auto-upload="false"></imgs-upload>
        </el-form-item>
        <el-form-item required label="规格型号">
          <el-input class="form-input" v-model="materialForm.model" placeholder="请输入规格型号"></el-input>
        </el-form-item>
        <el-form-item label="编号">
          <el-input class="form-input" v-model="materialForm.color" placeholder="请输入编号"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input class="form-input" v-model="materialForm.colorDescription" placeholder="请输入描述"></el-input>
        </el-form-item>
        <el-form-item label="材质">
          <el-input class="form-input" v-model="materialForm.material" placeholder="请输入材质"></el-input>
        </el-form-item>
        <el-form-item required label="商家">
          <sys-autocomplete class="form-input" v-model="materialForm.providerName" placeholder="请输入商家" :options="manufactorList">
          </sys-autocomplete>
        </el-form-item>
        <el-form-item required label="单位">
          <el-select filterable class="form-input" v-model="materialForm.unit" placeholder="请选择单位">
            <el-option v-for="(unit,index) in unitList" :key="'unit_'+index" :value="unit"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单价">
          <el-input-number is-decimal-zero class="form-input" v-model="materialForm.unitPrice" placeholder="请输入单价" controls-position="right" :min="0.01"
            :precision="2"></el-input-number>
        </el-form-item>
        <el-form-item label="交货周期">
          <el-input-number class="form-input" v-model="materialForm.procurementCycles" placeholder="请输入采购周期" controls-position="right" :min="0"
            :precision="0"></el-input-number>
        </el-form-item>
        <el-form-item required label="默认仓库">
          <el-select class="form-input" v-model="materialForm.defaultWarehouse" placeholder="请选择默认仓库">
            <el-option value="原材料仓"></el-option>
            <el-option value="辅料仓"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="我司编号">
          <el-input class="form-input" v-model="materialForm.providerNo" placeholder="请输入我司编号"></el-input>
        </el-form-item>
        <el-form-item label="是否与库存同步" class="double-line-item">
          <el-radio-group v-model="materialForm.isSynchronization">
            <el-radio v-for="synchronizationType in synchronizationTypeList" :key="synchronizationType.value" 
              :label="synchronizationType.value">{{synchronizationType.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="materialForm.isSynchronization!==1" label="库存数量">
          <el-input-number is-decimal-zero class="form-input" v-model="materialForm.count" placeholder="请输入库存数量" controls-position="right" :min="1/Math.pow(10,countPrecision)"
            :precision="countPrecision"></el-input-number>
        </el-form-item>
      </el-form>
      <div style="text-align:center">
        <el-button size="medium" type="primary" @click="save">
          <span v-if="type==='add'">保存</span>
          <span v-else>修改</span>
        </el-button>
      </div>
    </div>
  `;

  return {
    props: {
      material: {
        type: Object,
        default: function () {
          return null;
        }
      },
      type: {
        type: String,
        default: 'add'
      },
      dropdownOption: {
        type: Object,
        required: true
      }
    },

    computed: {
      countPrecision: function () {
        var unit = this.materialForm.unit;
        if (unit === '') {
          return 4;
        }
        return SysUtil.getMaterialNumberPrecision(unit, 4);
      }
    },

    data: function () {
      var material = this.material;
      material = new MaterialModel(material);

      var canClearClassify;
      if (this.type === 'add') {
        canClearClassify = true;
      } else {
        canClearClassify = material.classifyIds.length === 0;
      }
      return {
        loading: false,
        materialForm: material,
        canClearClassify: canClearClassify,
        unitList: [],
        manufactorList: [], //商家
        synchronizationTypeList: i18n.getDropDown('shoppingMallMaterial.synchronizationType', [1, 2]),
        classifyList: this.dropdownOption.classifyData.treeData,
        typeCascaderProps: {
          value: 'id',
          label: 'name',
          checkStrictly: true
        }
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.setUnitList(),
        this.setManufactorList()
      ]).then(function () {
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setUnitList: function () {
        var dropdownOption = this.dropdownOption;
        var unitList = dropdownOption.unitList;
        if (unitList !== undefined) {
          this.unitList = unitList;
          return Promise.resolve(unitList);
        }

        var self = this;
        return ajaxRequest('basicData/getCompanyUnit').then(function (unitList) {
          self.unitList = unitList;
          dropdownOption.unitList = unitList;
          return unitList;
        });
      },

      setManufactorList: function () {
        var dropdownOption = this.dropdownOption;
        var manufactorList = dropdownOption.providerNameList;
        if (manufactorList !== undefined) {
          this.manufactorList = manufactorList;
          return Promise.resolve(manufactorList);
        }

        var self = this;
        return ajaxRequest('shoppingMall/getAllFactoryName').then(function (manufactorList) {
          self.manufactorList = manufactorList;
          return manufactorList;
        });
      },

      save: function () {
        var materialForm = this.materialForm;
        var code = materialForm.checkValid();
        if (code !== '') {
          var msg = i18n.getMsg(`shoppingMallMaterial.error.materialForm.${code}`);
          this.$alert(msg, '信息');
          return;
        }

        var type = this.type;
        var self = this;
        this.$refs['materialImgsUpload'].submit().then(function () {
          if (type === 'add') {
            self.addMaterial(materialForm);
          } else {
            self.updateMaterial(materialForm);
          }
        }).catch(function () {});
      },

      addMaterial: function (materialForm) {
        var postData = materialForm.getObject();

        this.loading = true;
        var self = this;
        ajaxRequest('shoppingMall/addShoppingCallNew', postData).then(function () {
          self.$alert('物料新增成功', '信息', {
            callback: function () {
              self.$emit('save-success', postData);
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      updateMaterial: function (materialForm) {
        var postData = materialForm.getUpdateObject();

        this.loading = true;
        var self = this;
        ajaxRequest('shoppingMall/updateShoppingCallMaterial', postData).then(function () {
          self.$alert('物料修改成功', '信息', {
            callback: function () {
              self.$emit('save-success', postData);
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      ImgsUpload: ImgsUpload,
      SysAutocomplete: SysAutocomplete
    },

    template: template
  };
}();
